<template>
  <view class="showlist">
    <view
      class="showlist-list"
      v-if="palyListC.length < 9 || palyListC.length > 30"
    >
      <view
        :class="indexs == index ? 'item active' : 'item'"
        v-for="(item, index) in palyListC"
        :key="index"
        @click="changePlay(item, index)"
      >
        {{ index + 1 }}、{{ item.name }}-{{ item.artists[0].name }}</view
      >
    </view>
    <view class="showlist-list" v-else>
      <view
        :class="indexs == index ? 'item active' : 'item'"
        v-for="(item, index) in palyListC"
        :key="index"
        @click="changePlay(item, index)"
        >{{ index + 1 }} 、 {{ item.songs[0].name }}-{{
          item.songs[0].ar[0].name
        }}</view
      >
    </view>
    <view class="Tips" v-if="palyListC.length == 0">您还没有播放歌曲</view>
    <view class="close" @click="close">关闭</view>
  </view>
</template>

<script>
export default {
  computed: {
    palyListC() {
      return this.$store.state.palyList;
    },
    indexs() {
      return this.$store.state.currentIndex;
    },
  },
  methods: {
    // 关闭播放列表
    close() {
      this.$emit("close");
    },
    // 切歌
    changePlay(item, index) {
      if (this.palyListC.length < 9 || this.palyListC.length > 30) {
        this.getUrl(item.id); //获取播放地址
        this.getDetail(item.id); //获取音乐详情
      } else {
        this.getUrl(item.songs[0].id); //获取播放地址
        this.getDetail(item.songs[0].id); //获取音乐详情
      }

      this.$store.commit("changeCurrentIndex", index);
      setTimeout(() => {
        uni.hideLoading();
        this.creatBgAudio();
      }, 2000);
    },
    // 获取播放地址
    getUrl(id) {
      this.request("/song/url", "GET", { id }).then((res) => {
        this.$store.commit("changeCurrentMusicUrl", res.data[0].url);
      });
    },
    //获取歌曲详情
    getDetail(ids) {
      this.request("/song/detail", "GET", { ids }).then((res) => {
        let obj = {};
        obj.title = res.songs[0].name; //歌名
        obj.singer = res.songs[0].ar[0].name; //歌手
        obj.coverImgUrl = res.songs[0].al.picUrl; //图片
        this.$store.commit("changeCurrentMusicDet", obj);
      });
    },
    //创建背景音乐实例
    creatBgAudio() {
      const bgAudioMannager = uni.getBackgroundAudioManager();
      bgAudioMannager.title = this.$store.state.currentMusicDet.title;
      bgAudioMannager.singer = this.$store.state.currentMusicDet.singer;
      bgAudioMannager.coverImgUrl = this.$store.state.currentMusicDet.coverImgUrl;
      bgAudioMannager.src = this.$store.state.currentMusicUrl;
    },
  },
};
</script>

<style lang="less">
.showlist {
  position: absolute;
  bottom: 100rpx;
  left: 0;
  width: 750rpx;
  max-height: 500rpx;
  background: #fff;
  overflow: auto;
  .showlist-list {
    width: 100%;
    overflow: auto;
    .item {
      margin-top: 20rpx;
      max-height: 200rpx;
      margin-left: 20rpx;
    }
    .active {
      color: rgb(12, 180, 124);
    }
  }
  .Tips {
    width: 750rpx;
    height: 120rpx;
    text-align: center;
    color: #999;
  }
  .close {
    position: fixed;
    bottom: 0;
    width: 750rpx;
    height: 100rpx;
    background: #ffff;
    text-align: center;
    line-height: 100rpx;
    font-weight: 600;
    border-top: 2rpx solid #f0f0f0;
  }
}
</style>